<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2023-06-03 11:32:02
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-06-29 18:07:40
 * @FilePath: /com.huizhouyiren.web.d0101/src/components/toolbar/toolbar.vue
 * @Description: 右侧工具栏
-->
<script setup>
import { ref, watch } from "vue"
import { useRouter, useRoute } from "vue-router"
import { debounce } from "@/utils/tools.js"
import { useChat } from "@/stores/chat"

const router = useRouter()
const route = useRoute()
const emit = defineEmits(['showChatWindow'])
const chatStore = useChat()

let showBack = ref(false)
const showBackPath = {
    '/main/content': "",
    '/email/detail': "",
    '/main/homepage': ""
}

const showChatWindow = function () {
    emit('showChatWindow')
}

/**
 * @description: 返回上一页
 * @return {*}
 */
const goBack = function () {
    router.back()
}

let showTop = ref(false)
/**
 * @description: 返回顶部
 * @return {*}
 */
const goTop = function () {
    document.documentElement.scrollTop = 0
}

/**
 * @description: 滚动监听
 */
const handleScroll = function () {
    debounce(function () {
        if (document.documentElement.scrollTop > 1000) {
            showTop.value = true
        } else {
            showTop.value = false
        }
    }, 100)
}
window.addEventListener('scroll', handleScroll, true)


watch(() => route.path, (newVal) => {
    if (Reflect.has(showBackPath, newVal)) {
        showBack.value = true
    } else {
        showBack.value = false
    }
}, {
    immediate: true,
    deep: true
})


</script>
<template>
    <div>
        <div class="flex items-center justify-center rounded cursor-pointer bg-primary"
            style="height: 4.125rem;width: 5.3125rem;" @click="showChatWindow">
            <div>
                <div class="flex justify-center py-2">
                    <img src="../../assets/image/navbar/navbar3.png" alt="" style="height: auto;"
                        :style="{ width: chatStore.unread > 0 ? '1.875rem' : '2.5rem' }">
                </div>
                <!-- {{ $t('home.chatting') }} -->
                <div class="w-full text-xs text-center text-white" v-if="chatStore.unread">{{ chatStore.unread }}</div>
            </div>
        </div>
        <Transition name="tablist">
            <div class="flex items-center justify-center mt-4 rounded cursor-pointer bg-primary"
                style="height: 4.125rem;width: 5.3125rem;" v-if="showBack" @click="goBack">
                <img src="../../assets/image/home/back.png" alt="" style="width: 2.875rem;height: auto;">
            </div>
        </Transition>
        <Transition name="tablist">
            <div class="flex items-center justify-center mt-4 rounded cursor-pointer bg-primary"
                style="height: 4.125rem;width: 5.3125rem;" v-if="showTop" @click="goTop">
                <img src="../../assets/image/home/top.png" alt="" style="width: 2.875rem;height: auto;">
            </div>
        </Transition>
    </div>
</template>